<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<div th:replace="public/base_update :: html"></div>

<body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->


<!-- START MAIN -->
<!-- START WRAPPER -->


<!-- START CONTENT -->
<section id="content">
    <!--Form Advance-->
    <div class="row">
        <div class="col s6 x6 l6 xl6">
            <h4 class="card-title center-align">系统报表
            </h4>
            <div class="card" style="overflow: hidden">
                <div class="card-content">
                    <!--Form Advance-->
                    <div class="row">
                        <div id="medicine_list" class="col l12 m12 l12 xl12">
                            <table id="data-table-simple" class="display">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s6 x6 l6 xl6">
            <h4 class="card-title center-align">人工报表
            </h4>
            <div class="card">
                <div class="card-content">
                    <div id="enter_medicine_list" class="col l12 m12 l12 xl12">
                        <table id="data-table-simple-enter">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s12">
            <button id="send_btn" class="btn cyan waves-effect waves-light right" type="submit" name="action">提交盘点申请
                <i class="mdi-content-send right"></i>
            </button>
        </div>
    </div>
</section>


<!-- ================================================
Scripts
================================================ -->
<script type="text/javascript" th:src="@{/assets/global/js/ahsj.selfdatatable.js}"></script>
<script th:inline="javascript">
    var gridEnterList = new AHSJDT();
    var grid = new Datatable();
    $(document).ready(function () {
        console.log('enterStoreList is', [[${enterStoreList}]])
        initBtn();
        initTable();
    });
    function initTable() {
        grid.init({
            src: $("#data-table-simple"),
            onSuccess: function (grid) {
            },
            onError: function (grid) {
            },
            onDataLoad: function (grid) {
                initDataTableToolTip("data-table-simple", [1,2,3,4,5,6,7,8,9,10,11,12]);
            },
            loadingMessage: 'Loading...',
            dataTable: {
                "ajax": {
                    "url": "/enterStore/listGroupByPartsId", // ajax source
                },
                "columns": [
                    {
                        "title": "<input type='checkbox' class='icheck' id='checkAll'>",
                        "render": function (data, type, row) {
                            return "<label><input type=\"checkbox\" value=\"" + row.id + "\" class=\"icheck\" value=\"1\" /></label>";
                        },
                        "width": "18px",
                        "orderable": false,
                        "className": "centered"
                    },{
                        "title":"仓库名",
                        "data":"storeName",
                        "name":"store_name"
                    },
                    {
                        "title":"零配件名称",
                        "data":"name",
                        "name":"name"
                    },{
                        "title":"本次入库剩余数量",
                        "data":"num",
                        "name":"num"
                    }
                ],
                "order" : [ [ 2, "asc" ] ]
            }
        });

        gridEnterList.init({
            src: $("#data-table-simple-enter"),
            theads: [
                {
                    "title":"仓库名",
                    "data":"storeName",
                    "name":""
                },
                {
                    "title":"零配件名称",
                    "data":"name",
                    "name":""
                },
                {
                    "title": "人工库存",
                    "width": "60px",
                    "className": "centered",
                    "render": function (row) {
                        var rtnBtn = "";
                        //如果获取字符串，必须在参数外反转"
                        rtnBtn = rtnBtn +
                            " <input id='num' name='num' type='number' value=\""+row.num+"\" />";
                        rtnBtn = rtnBtn +
                            " <input id='id' name='id' type='hidden' value=\""+row.id+"\" />";
                        // 返回自定义内容
                        return rtnBtn;
                    }
                }
            ],
            datas:[[${enterStoreList}]]
        });
    }
    function initBtn() {
        $("#send_btn").click(function () {
            dialog.confirm('确定提交么?', function (index, layero) {
                var ids = gridEnterList.getIDs();
                var nums = gridEnterList.getNums();
                $.ajax({
                    type: "post",
                    data: {"ids": ids.join(','),
                        "nums": nums.join(','),},
                    url: "/inventory/add",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.success) {
                            Materialize.toast(msg.message, 500,'',function () {
                                dialog.parentclose(true)
                            });
                        } else {
                            Materialize.toast(msg.message, 3000);
                        }
                    },
                    error: function ( ) {
                        Materialize.toast("网络异常");
                    }
                });
            });
        });

    }




    /**
     * 初始化datatable col tooltip
     * @param controlName datatable对象名
     * @param colNo 需要展示tip的列序号数组
     */
    function initDataTableToolTip(controlName, colNo) {
        //initTooltip(controlName);
        $('#' + controlName + ' tbody tr').each(function () {
            var nTds = $('td', this);

            for (var i = 0; i < colNo.length; i++) {
                var col = colNo[i];
                if ($(nTds[col])[0] != undefined) {
                    //console.debug("initDataTableToolTip col[" + col + "]=" + $(nTds[col]).text());

                    $(nTds[col])[0].setAttribute('title', $(nTds[col]).text());
                }
            }
        });
        tooltip();
    }

    function tooltip() {
        jQuery(document).ready(function ($) {
            var sweetTitles = {
                x: 10,
                y: 20,
                tipElementsI: "i",
                noTitle: false,
                init: function () {
                    var noTitle = this.noTitle;
                    $(this.tipElementsI).each(function () {
                        $(this).mouseover(function (e) {
                            if (noTitle) {
                                isTitle = true;
                            } else {
                                isTitle = $.trim(this.title) != '';
                            }
                            if (isTitle) {
                                this.myTitle = this.title;
                                this.title = "";
                                var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-btu'>" + this.myTitle + "</div></div>";
                                $('body').append(tooltip);
                                $('.tooltip').css({
                                    "top": (e.pageY + 20) + "px",
                                    "left": (e.pageX - 20) + "px"
                                }).show('fast');
                            }
                        }).mouseout(function () {
                            if (this.myTitle != null) {
                                this.title = this.myTitle;
                                $('.tooltip').remove();
                            }
                        }).mousemove(function (e) {
                            $('.tooltip').css({
                                "top": (e.pageY + 20) + "px",
                                "left": (e.pageX - 20) + "px"
                            });
                        });
                    });


                }
            };
            $(function () {
                sweetTitles.init();
            });


        });
    }
</script>

</body>

</html>
